
@import './dark.less';

/** Flex */
.flex(@align: center, @justify: center) {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: @align;
    align-items: @align;
    justify-content: @justify;
}

/** Border Radius */
.border-radius(@raduis: 4) {
    -moz-border-radius: (@raduis / @mi-font-size-base) * @mi-font-size;
    -webkit-border-radius: (@raduis / @mi-font-size-base) * @mi-font-size;
    -o-border-radius: (@raduis / @mi-font-size-base) * @mi-font-size;
    -khtml-border-radius: (@raduis / @mi-font-size-base) * @mi-font-size;
    border-radius: (@raduis / @mi-font-size-base) * @mi-font-size;
}

.border-radius-circle() {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -khtml-border-radius: 50%;
    border-radius: 50%;
}

/** Font Size */
.font-size(@size: @mi-font-size-normal){
    font-size: (@size / @mi-font-size-base) * @mi-font-size;
    line-height: ((@size + 4) / @mi-font-size-base) * @mi-font-size;
}

/** Properties */
.properties(@key, @value: @mi-spacing) {
    @{key}: (@value / @mi-font-size-base) * @mi-font-size;
}

/** Text Ellipsis */
.text-ellipsis(){
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/** Letter Spacing  */
.letter-spacing(@value: 2) {
    .properties(letter-spacing, 2);
}

/** Tag */
.tag() {
    background: #ff5500;
    margin-right: 0;
    .border-radius(16);
    color: @mi-white-color;
    .properties(line-height, 16);
    .properties(max-width, 64);
    .text-ellipsis();
    .properties(padding-left);
    .properties(padding-right);
    .properties(font-size, 12);
    .properties(height, 20);
}